<template>
  <view class="editor-container">
    <!-- 文章标题输入 -->
    <input type="text" placeholder="请输入文章标题" v-model="articleTitle" class="title-input" />
    <!-- 文章正文编辑器 -->
    <editor :placeholder="'请输入文章内容'" v-model="articleContent" class="content-editor" />
    <!-- 标签选择 -->
    <view class="tag-container">
      <text class="tag-label">标签：</text>
      <input type="text" placeholder="添加标签" @confirm="addTag" class="tag-input" />
      <view class="tag-list">
        <text class="tag-item" v-for="(tag, index) in tags" :key="index">
          {{ tag }}
          <text class="tag-remove" @click="removeTag(index)">×</text>
        </text>
      </view>
    </view>
    <!-- 发布按钮 -->
    <button type="primary" @click="publishArticle" class="publish-btn">发布文章</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      articleTitle: '',
      articleContent: '',
      tags: []
    }
  },
  methods: {
    addTag(e) {
      const tag = e.target.value.trim();
      if (tag && !this.tags.includes(tag)) {
        this.tags.push(tag);
        e.target.value = '';
      }
    },
    removeTag(index) {
      this.tags.splice(index, 1);
    },
    publishArticle() {
      // 后续实现发布逻辑
      console.log('发布文章:', {
        title: this.articleTitle,
        content: this.articleContent,
        tags: this.tags
      });
    }
  }
}
</script>

<style scoped>
.editor-container {
  padding: 30rpx;
  background-color: $uni-bg-color;
}
.title-input {
  height: 80rpx;
  font-size: 32rpx;
  margin-bottom: 30rpx;
  border-bottom: 1rpx solid $uni-border-color;
}
.content-editor {
  height: 600rpx;
  margin-bottom: 30rpx;
}
.tag-container {
  margin-bottom: 30rpx;
}
.tag-label {
  font-size: 28rpx;
  color: $uni-text-color-grey;
  margin-right: 20rpx;
}
.tag-input {
  display: inline-block;
  width: 400rpx;
  height: 60rpx;
  font-size: 28rpx;
  border: 1rpx solid $uni-border-color;
  border-radius: 10rpx;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}
.tag-item {
  display: flex;
  align-items: center;
  height: 60rpx;
  padding: 0 20rpx;
  background-color: $uni-bg-color-grey;
  border-radius: 30rpx;
  font-size: 28rpx;
}
.tag-remove {
  margin-left: 10rpx;
  color: $uni-text-color-disable;
  font-size: 24rpx;
}
.publish-btn {
  height: 80rpx;
  font-size: 32rpx;
}
</style>